<script setup>
import {onMounted, ref} from 'vue';
import {useStore} from 'vuex'
import {userUpdateProfile} from '@/api/user'
import {ElMessage} from "element-plus";
import {encryptData} from "@/utils/crypto.js";

const editForm = ref({
    id: "",
    username: "",
    password: "",
    confirm_password: "",
})

const store = useStore();

onMounted(() => {
    editForm.value = store.state.user
});

const editUser = () => {
    if (editForm.value.password.trim() === "" || editForm.value.confirm_password.trim() === "") {
        ElMessage.warning("密码不能为空");
        return;
    }
    if (editForm.value.password !== editForm.value.confirm_password) {
        ElMessage.warning("两次密码不一致");
        return;
    }
    let params = JSON.parse(JSON.stringify(editForm.value));
    params.password = encryptData(params.password);
    userUpdateProfile(params).then((res) => {
        if (res.code === 200) {
            ElMessage.success("修改信息成功")
        } else {
            ElMessage.error("修改信息失败");
        }
    }).catch((err) => {
        console.log(err);
        ElMessage.error("修改信息异常");
    });
}


</script>

<template>
    <el-container class="table-container">
        <el-row>
            <el-form :model="editForm" label-width="70px">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="editForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="editForm.password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmpassword">
                    <el-input type="password" v-model="editForm.confirm_password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="editUser()">提交</el-button>
                </el-form-item>
            </el-form>
        </el-row>
    </el-container>
</template>

<style scoped>
.table-container {
    margin: 20px 20px;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    gap: 20px;
}
</style>
